<template>
  <view class="login-container">
    <!-- 使用公共自定义导航栏 -->
    <custom-navbar title="日程管理" />
    
    <!-- 主内容区域 -->
    <view class="content-wrapper">
      <!-- 登录图片 -->
      <image class="login-logo" src="/static/login-logo@2x.jpg" mode="widthFix"></image>
      
      <!-- 登录按钮 -->
      <button class="login-btn" @click="wxLogin">微信一键登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 导航栏高度（状态栏+导航栏）
const navbarHeight = ref(0);

// 获取导航栏高度
onMounted(() => {
  try {
    // 使用新的API获取窗口信息
    // #ifdef MP-WEIXIN
    const windowInfo = uni.getWindowInfo();
    navbarHeight.value = (windowInfo.statusBarHeight || 20) + 45; // 状态栏 + 导航栏高度
    // #endif
    
    // #ifndef MP-WEIXIN
    const sysInfo = uni.getSystemInfoSync();
    navbarHeight.value = (sysInfo.statusBarHeight || 20) + 45; // 状态栏 + 导航栏高度
    // #endif
  } catch (e) {
    console.error('获取系统信息失败', e);
    navbarHeight.value = 65; // 默认值
  }
});

// 微信登录方法
const wxLogin = async () => {
  try {
    // 获取微信用户信息
    const res = await uni.login({
      provider: 'weixin'
    });
    
    console.log(res, 'res');
    
    if (!res.code) {
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      });
      return;
    }
    
    // 获取code后调用云对象进行登录
    const uniIdCo = uniCloud.importObject('uni-id-co');
    const loginResult = await uniIdCo.loginByWeixin({
      code: res.code
    });
    
    console.log('loginResult:', loginResult);
    
    const { newToken: { token, tokenExpired }, uid } = loginResult;
    
    if (token && tokenExpired) {
      // 保存登录状态
      uni.setStorageSync('uni_id_token', token);
      uni.setStorageSync('uni_id_token_expired', tokenExpired);
      uni.setStorageSync('uid', uid);
      
      // 登录成功，跳转到首页
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      }, 1500);
    } else {
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      });
    }
  } catch (e) {
    console.error('登录异常', e);
    uni.showToast({
      title: '登录异常，请重试',
      icon: 'none'
    });
  }
};

// 检查是否已登录
onLoad(() => {
  const token = uni.getStorageSync('uni_id_token');
  const tokenExpired = uni.getStorageSync('uni_id_token_expired');
  
  // 如果token未过期，直接跳转到首页
  if (token && tokenExpired && new Date().getTime() < tokenExpired) {
    uni.reLaunch({
      url: '/pages/index/index'
    });
  }
});
</script>

<style lang="scss" scoped>
// 页面基础样式
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  
  // 内容区样式
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    padding: 0 58rpx;
    margin-top: var(--status-bar-height);
    padding-top: calc(90rpx + 110rpx); // 导航栏高度 + 110px距离
    padding-bottom: 40rpx;
    box-sizing: border-box;
    
    // 登录图片样式
    .login-logo {
      width: 634rpx;
      height: auto;
      max-width: 100%;
    }
    
    // 登录按钮样式
    .login-btn {
      width: 634rpx;
      max-width: 100%;
      margin-top: 110rpx;
      background-color: #0066FF;
      color: #FFFFFF;
      border-radius: 10rpx;
      font-size: 36rpx;
      height: 100rpx;
      line-height: 100rpx;
      
      &::after {
        border: none;
      }
    }
  }
}

// 响应式适配
@media screen and (max-height: 700px) {
  .login-container {
    .content-wrapper {
      padding-top: calc(90rpx + 90rpx); // 导航栏高度 + 90px距离
      
      .login-logo {
        width: 534rpx;
      }
      
      .login-btn {
        width: 534rpx;
        margin-top: 90rpx;
      }
    }
  }
}

@media screen and (max-height: 600px) {
  .login-container {
    .content-wrapper {
      padding-top: calc(90rpx + 70rpx); // 导航栏高度 + 70px距离
      
      .login-logo {
        width: 480rpx;
      }
      
      .login-btn {
        width: 480rpx;
        margin-top: 70rpx;
      }
    }
  }
}
</style> 